<template>
    <div class="pay-success" :style="style">
        <div class="success-info">
            <div class="method">已{{successList.title}}支付</div>
            <div class="amount" v-if="successList.type==='integral'">{{successList.amount | moneyFmt(2, '')}}</div>
            <div class="amount" v-else>{{successList.amount | moneyFmt(2, '￥')}}</div>
        </div>
        <div class="success-detail">
            <div class="time-method">
                <span>付款方式</span>
                <span>{{successList.title}}支付</span>
            </div>
            <div class="time-method">
                <span>付款时间</span>
                <span>{{successList.time}}</span>
            </div>
        </div>
        <div class="success-btn">
            <div class="success-bottom" @click="confirm">确认</div>
            <!--<div class="doubt" @click="doubt">对此有疑问|申诉</div>-->
        </div>
        <RecgoodsPop ref="recgoods" :recinfo="recgoodsInfo"></RecgoodsPop>
    </div>
</template>

<script>
const HEIGHT = document.documentElement.clientHeight + 'px';
import API from '../../request/api';
import RecgoodsPop from '../../components/Activity/recgoods-pop';
export default {
    components: {
        RecgoodsPop,
    },
    data() {
        return {
            successList: {},
            recgoodsInfo: {},
            style: {
                height: HEIGHT
            }
        }
    },
    computed: {
        systemId() {
            return this.$store.state.login.system;
        },
    },
    methods: {
        confirm() {
            let payData = this.$store.state.online.createPayData;
            if (payData.groupid == 1) {
                this.$router.replace({
                    name: 'group-order-detail',
                    query: {
                        pid: payData.getWayData.target_id,
                        active: 1
                    }
                })
            } else {
                this.$router.replace({
                    name: 'user'
                })
            }
            this.$store.commit('dataCreatePay', '');
        },
        getSuccessInfo() {
            let getData = this.$route.query;
            console.log('getdata:', getData);
            // 获取 支付成功页面信息
            this.request.get(API.PaySuccess, getData).then((result) => {
                this.successList = result;
                console.log('getPayMethods-result', result, this.successList);
            });
        },
        getActiveTips() {
            let data = this.$store.state.user.ticketArr[this.systemId];
            console.log('getdata:', data);
            // 获取 是否弹出七夕推荐商品弹窗
            this.request.get(API.getActiveTips, {
                ticket_id: data[0],
                last_ticket_id: data[1]
            }).then((result) => {
                this.recgoodsInfo = result;
                // this.recgoodsInfo.ticket = getData.ticket_id;
                if (result.is_tips) {
                    this.$refs.recgoods.show()
                }
                console.log('getActiveTips-result', result);
            });
        }
        // doubt() {
        //     this.$router.push({
        //         name: 'technical-service'
        //     })
        // }
    },
    mounted() {
        this.getSuccessInfo()
        this.getActiveTips()
    },
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/main.styl';

.pay-success {
    padding: cellPadding;
    background-color: grayF;
    display: flex;
    flex-direction: column;
    // justify-content center
    align-items: center;
    text-align: center;

    .success-info {
        border-bottom: vw(1) solid #f5f5f5;
        height: vw(154);
        width: 100%;
        margin-top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .method {
            word-vw(word16, gray3);
            line-height: vw(21);
        }

        .amount {
            word-vw(word36, gray3);
            line-height: vw(52);
        }
    }

    .success-detail {
        width: 100%;
        margin-top: bigMargin;

        .time-method {
            display: flex;
            justify-content: space-between;
            word-vw(word14, gray3);
            line-height: vw(19);
        }
    }

    .success-btn {
        margin-top: vw(50);
    }

    .success-bottom {
        big-solid();
    }

    .doubt {
        margin-top: smallMargin;
        word-vw(word14, gray9);
    }
}
</style>





